<template>
	<view>
		<view class="bg">
		</view>
		<view class="wrapper">
			<view class="use_wrapper" v-for="(item,index) in firstList" 
			:key="item.id"
			@click="toDetail(item.id)">
				<view class="image">
					<image :src="item.image" mode=""></image>
				</view>
				<view class="text">
					<view class="text1">
						{{item.title}}
					</view>
					<view class="time">
						{{item.time|FormatTime}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				firstList:[]
			}
		},
		async created() {
			this.firstList=await this.getFirstUseList()
			console.log(this.firstList)
		},
		methods: {
			async getFirstUseList(){
				const {data}=await this.$http({
					url:"mis/totu"
				})
				return data.data
			},
			//跳转详情页
			toDetail(id){
				uni.navigateTo({
					url:"/pages/forecast/children/firstuseDetail/firstuseDetail?id="+id
				})
			}
		},
		
	}
</script>

<style scoped>
.bg{
	background-color: #f1f1f1;
	height: 20rpx;
	width: 100%;
}
.wrapper{
	padding: 0 30rpx;
}
.use_wrapper{
	display: flex;
	padding: 30rpx 0;
	border-bottom: 1rpx solid rgba(151,151,151,0.2);
}
.use_wrapper .image image{
	width: 120rpx;
	height: 120rpx;
}
.text{
	position: relative;
	margin-left: 30rpx;
}
.time{
	position: absolute;
	bottom: 0;
}
.text .text1{
	font-size: 26rpx;
	font-family: PingFang SC;
	font-weight: 600;
	color: #333333;
}
.text .time{
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #666666;
}
.text .time{
	width: 400rpx;
}
</style>
